import axios from 'axios'
import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'
import {
  Message
} from 'element-ui'
import {
  getToken
} from '@/utils/auth' // 验权(从cookie中获取)
import {
  setTitle
} from '@/utils'

const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  // console.log("to===", to, store.getters.permission_routers)
  NProgress.start()
  // 设置浏览器头部标题
  const browserHeaderTitle = to.meta && to.meta.title ? to.meta.title : "";
  browserHeaderTitle && store.commit('SET_BROWSER_HEADER_TITLE', browserHeaderTitle);
  console.log("browserHeaderTitle",browserHeaderTitle)
  // 点击登录时，拿到了token并存入了cookie,保证页面刷新时,始终可以拿到token
  if (getToken('TOKEN')) {
    if (to.path === '/login') { //无需登录跳转至首页
      Message({
        type: "warning",
        message: "无需登录，为您跳转至首页！"
      })
      next({
        path: '/'
      })
      NProgress.done();
    } else {
      if (store.getters.routers_flag) {
        // findMenuRouter().then(res =>{
        // let routerRes = res.data;})
        let menuRes = [{
            id: "2",
            name: "compTest",
            path: "/compTest",
            component: "Layout",
            meta: {
              icon: "el-icon-s-shop",
              title: "组件测试页面",
            },
            isLeaf: false,
            hidden: false,
            children: [{
                id: "203",
                name: "publicComp",
                path: "/publicComp",
                component: "Empty",
                meta: {
                  icon: "el-icon-document",
                  title: "公共组件页面",
                },
                isLeaf: false,
                hidden: false,
                children: [{
                    id: "20302",
                    name: "quarterDatepickerTest",
                    path: "/quarterDatepickerTest",
                    component: "/quarterDatepickerTest.vue",
                    meta: {
                      icon: "el-icon-menu",
                      title: "季度组件",
                    },
                    isLeaf: true,
                    hidden: false,
                  },
                  {
                    id: "20303",
                    name: "wangeditorTest",
                    path: "/wangeditorTest",
                    component: "/wangeditorTest.vue",
                    meta: {
                      icon: "el-icon-document",
                      title: "文本编辑框",
                    },
                    isLeaf: true,
                    hidden: false,
                  },
                  {
                    id: "20304",
                    name: "draggableTest",
                    path: "/draggableTest",
                    component: "/draggableTest.vue",
                    meta: {
                      icon: "el-icon-document",
                      title: "拖拽组件",
                    },
                    isLeaf: true,
                    hidden: false,
                  },
                ],
              },
              {
                id: "204",
                name: "helpDoc",
                path: "/helpDoc",
                component: "/helpDoc/helpDoc.vue",
                meta: {
                  icon: "el-icon-setting",
                  title: "帮助文档",
                },
                isLeaf: true,
                hidden: false,
              },
              {
                id: "205",
                name: "accBookManaGrid",
                path: "/accBookManaGrid",
                component: "/accBookMana/accBookManaGrid.vue",
                meta: {
                  icon: "el-icon-location",
                  title: "账簿列表",
                },
                isLeaf: true,
                hidden: false,
              },
            ],
          },
          {
            id: "3",
            name: "diaryAccountGrid",
            path: "diaryAccountGrid",
            component: "/diaryAccount/diaryAccountGrid.vue",
            meta: {
              icon: "el-icon-s-platform",
              title: "日记账列表",
            },
            isLeaf: true,
            hidden: false,
          },
        ]
        store.dispatch('generateRoutes', menuRes).then(() => {
          router.addRoutes(store.getters.addRouters); // 动态添加可访问权限路由表
          next({
            ...to,
            replace:true
          }) // hack方法 确保addRoutes已完成
        });
      } else{
        next();
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // 点击退出时,会定位到这里
      next()
    } else {
      next('/login') //跳转到登录页
      NProgress.done() //进度条结束
    }
  }
});
router.afterEach(() => {
  NProgress.done() // 结束Progress
  setTimeout(() => {
    const browserHeaderTitle = store.getters.browserHeaderTitle;
    setTitle(browserHeaderTitle)
  }, 100)
})



/**
  本系统权限逻辑分析：
  1、路由对象区分权限路由对象和非权限路由对象；初始化时，将非权限路由对象赋值给Router;同时设置权限路由中的meta对象，如:meta:{roles:['admin','editor']}
     表示该roles所拥有的路由权限;
  2、通过用户登录成功之后返回的roles值，进行路由的匹配并生成新的路由对象;
  3、用户成功登录并跳转到首页时，根据刚刚生成的路由对象，渲染左侧的菜单;即，不同的用户看到的菜单是不一样的;
  
  用户点击登录和退出之后的业务逻辑分析：
  1、用户点击登录按钮，通过路由导航钩子router.beforeEach()函数确定下一步的跳转逻辑,如下：
   1.1、用户已经登录成功过，并从cookie中拿到了token值;
     1.1.1、用户访问登录页面,直接定位到登录页面;
     1.1.1、用户访问非登录页面,需要根据用户是否有roles信息，进行不同的业务逻辑,如下：
        (1)、初始情况下,用户roles信息为空;
            1.通过getUserInfo()函数,根据token拉取用户信息;并通过store将该用户roles,name,avatar信息存储于vuex;
            2.通过store.dispatch('generateRoutes', { roles })去重新过滤和生成路由,通过router.addRoutes()合并路由表;
            3.如果在获取用户信息接口时出现错误，则调取store.dispatch('LogOut')接口,返回到login页面;
          
        (2)、用户已经拥有roles信息；
            1.点击页面路由，通过roles权限判断 hasPermission()。如果用户有该路由权限，直接跳转对应的页面;如果没有权限，则跳转至401提示页面;
  
  2.用户点击退出,token已被清空
    1.如果设置了白名单用户，则直接跳转到相应的页面;
    2.反之,则跳转至登录页面;
 */
